/*
 * @Author: liu wang wang
 * @Date: 2020-07-07 19:33:22
 * @LastEditTime: 2020-07-17 17:37:44
 * @LastEditors: liu wang wang
 * @Description: 公共基础组件类
 * @FilePath: \st-sdk-js\src\utils\Common.ts
 */
import { Option, Input, Label, Button, Radio, CheckBox, Select, } from '../../types'
import store from './store';
import { limit } from './checkboxLimit';
class Common {
    protected resetCss:string
    constructor() {
        this.resetCss = `
        margin:0;
        padding:0;
        margin-block-start: 0em;
        margin-block-end: 0em;`
    }
    // 获取选择框选项列表
    private getOption({ id, name }: Option): HTMLOptionElement {
        const option = document.createElement('option');
        option.value = id;
        option.innerHTML = name;
        return option
    }
    public createDiv(): HTMLElement {
        const div = document.createElement('div');
        this.setStyle(div, this.resetCss);
        return div;
    }
    public createP(): HTMLElement {
        const p = document.createElement('p');
        this.setStyle(p, this.resetCss);
        return p;
    }
    public createSpan(): HTMLElement {
        const span = document.createElement('span');
        this.setStyle(span, this.resetCss);
        return span;
    }
    public createInput(): HTMLInputElement {
        const input =  document.createElement('input');
        this.setStyle(input, this.resetCss);
        return input;
    }
    public createLabel(): HTMLLabelElement {
        const label = document.createElement('label');
        this.setStyle(label, this.resetCss);
        return label;
    }
    public createSelect(id: string, name: string): HTMLElement {
        const select = document.createElement('select');
        select.id = id;
        select.name = name;
        return select;
    }
    public createImg(): HTMLImageElement {
        const img = document.createElement('img');
        this.setStyle(img, this.resetCss);
        return img;
    }
    // 获取一个flex布局的p结构
    public getPofFlex(): HTMLElement {
        const p = this.createP();
        p.style.display = 'flex';
        p.style.alignItems = 'center';
        return p;
    }
    // 获取一个flex布局的div结构
    public getDivofFlex(): HTMLElement {
        const div = this.createDiv();
        div.style.display = 'flex';
        div.style.alignItems = 'center';
        return div;
    }
    public getTipEle(text: string): HTMLElement {
        const nameTip = this.createSpan();
        const nameTipStyle = `
            font-size:14px;
            margin-right:5px;
        `;
        this.setStyle(nameTip, nameTipStyle);
        nameTip.innerHTML = text;
        return nameTip;
    }
    // 获取input
    public getInput({ type, name, id, checked=false, value }: Input): HTMLInputElement {
        const input = this.createInput();
        input.type = type;
        input.value = value || '';
        input.id = id || '';
        input.checked = checked;
        input.name = name;
        return input;
    }
    // 获取一个带描述的label
    public getLabel({ htmlFor, text }: Label): HTMLLabelElement {
        const label = this.createLabel();
        label.htmlFor = htmlFor;
        label.innerHTML = text;
        label.style.fontSize = '14px';
        return label;
    }
    // 设置样式
    public setStyle(ele: HTMLElement, style: string): void {
        const lastStyle = ele.getAttribute('style') || '';
        style = `${lastStyle}${style}`;
        ele.setAttribute('style', style);
    }
    // Button组件
    public getButton(btnInfo: Button): HTMLElement {
        const btn = this.createSpan();
        const style = `
            display:inline-block;
            text-align:center;
            line-height:${btnInfo.height}px;
            width:${btnInfo.width}px;
            height:${btnInfo.height}px;
            color:${btnInfo.color || '#333'};
            background-color:${btnInfo.background || '#fff'};
            cursor:pointer;
            border-radius:4px;
            font-size:12px;
        `;
        this.setStyle(btn, style);
        btn.innerHTML = btnInfo.text;
        btn.addEventListener('click', (e) => { btnInfo.clickHandle && btnInfo.clickHandle(e) });
        return btn
    }
    // Radio组件
    public getRadio({ name, text, checked, id }: Radio): HTMLElement {
        const input = this.getInput({
            type: 'radio',
            name,
            checked,
            id
        });
        const label = this.getLabel({
            htmlFor: id,
            text
        });
        let p = this.getPofFlex();
        input.style.marginRight = '8px';
        p.appendChild(input);
        p.appendChild(label);
        return p;
    }
    // CheckBox组件
    public getCheckBox({ value, text, id, checked, name }: CheckBox) {
        const input = this.getInput({
            type: 'checkbox',
            value,
            id,
            name,
            checked,
        });
        input.onchange = function(e:Event){
            const name = ((e as Event).target as HTMLInputElement).name;
            limit(name,3);
        }
        input.style.marginRight = '8px';
        const label = this.getLabel({
            htmlFor: id,
            text
        });
        let p = this.getPofFlex();
        p.appendChild(input);
        p.appendChild(label);
        return p;
    }
    // Select组件
    public getSelect({ name, id, list }: Select) {
        const select = this.createSelect(id, name);
        list.map(option => {
            select.appendChild(this.getOption({
                name: option.name,
                id: option.id
            }));
        });
        return select;
    }
    // 关闭弹窗
    public close(): void {
        const stLayout: HTMLElement | null = document.getElementById('st-layout-shadow');
        if (stLayout === null) {
            return;
        }
        document.body.removeChild((document.getElementById('st-layout-shadow') as Node));
        
        store.clear();
    }
}

export default Common;